<!-- v-bind对于样式控制的增强-操作class
语法:class="对象/数组"
①对象→键就是类名，值是布尔值。如果值为true，有这个类，否则没有这个类
<div class="box”:class="{ 类名1：布尔值，类名2：布尔值 }"></div>
②数组→数组中所有的类，都会添加到盒子上，本质就是一个 class 列表
<div class="box":class="[ 类名1，类名2，类名3]"></div> -->
<style>
    .box {
        width: 200px;
        height: 200px;
        border: 3px solid #000;
        font-size: 30px;
        margin-top: 10px;
    }

    .pink {
        background-color: pink;
    }

    .big {
        width: 300px;
        height: 300px;
    }
</style>
<div id="app">
    <div class="box" :class="{pink:true,big:true}">黑马程序员</div>
    <div class="box" :class="['pink','big']">黑马程序员</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>

<script>
    const app = new Vue({
        el: '#app',
        data: {

        },
        methods: {

        }
    })
</script>